<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>班级管理</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        body {
            margin: 20px;
            font-family: "Microsoft YaHei", sans-serif;
        }
        .search-bar {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .actions {
            display: flex;
            gap: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>Tlias智能学习辅助系统 - 班级管理</h2>

    <div class="search-bar">
        <el-input v-model="searchName" placeholder="请输入班级名称" style="width: 200px;"></el-input>
        <el-date-picker
                v-model="dateRange"
                type="daterange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 300px;"
        ></el-date-picker>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleClear">清空</el-button>
        <el-button type="success" @click="handleAdd">+ 新增班级</el-button>
    </div>

    <el-table :data="filteredData" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="60"></el-table-column>
        <el-table-column prop="name" label="班级名称"></el-table-column>
        <el-table-column prop="room" label="班级教室" width="100"></el-table-column>
        <el-table-column prop="masterName" label="班主任" width="100"></el-table-column>
        <el-table-column prop="beginDate" label="开课时间" width="120"></el-table-column>
        <el-table-column prop="endDate" label="结课时间" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="100"></el-table-column>
        <el-table-column prop="updateTime" label="最后修改时间" width="180"></el-table-column>
        <el-table-column label="操作" width="160">
            <template #default="scope">
                <div class="actions">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
</div>

<script>
    const { createApp, ref, computed } = Vue;

    createApp({
        setup() {
            // 数据
            const searchName = ref('');
            // 时间范围
            const dateRange = ref(null);

            // 班级数据
            const classData = ref([]);

            // 计算属性
            const filteredData = computed(() => {
                return classData.value.filter(item => {
                    const matchName = item.name.includes(searchName.value);
                    const matchDate = !dateRange.value || (
                        new Date(item.beginDate) >= new Date(dateRange.value[0]) &&
                        new Date(item.endDate) <= new Date(dateRange.value[1])
                    );
                    return matchName && matchDate;
                });
            });

            //  处理查询逻辑
            const handleSearch = async () => {
                const query = {
                    name: searchName.value,
                    beginDate: dateRange.value ? (dateRange.value[0]).format('YYYY-MM-DD') : null,
                    endDate: dateRange.value ? (dateRange.value[1]).format('YYYY-MM-DD') : null
                };

                try {
                    const response = await axios.get("/class",{ params: query });
                    classData.value = response.data.data;
                } catch (error) {
                    console.error("获取班级数据失败:",error);
                }
            };

            //  处理清空逻辑
            const handleClear = () => {
                searchName.value = '';
                dateRange.value = null;
            };

            //  处理编辑逻辑
            const handleEdit = (row) => {
                alert(`编辑：${row.name}`);
            };

            //  处理删除逻辑
            const handleDelete = (row) => {
                if (confirm(`确定删除 ${row.name}？`)) {
                    axios.delete("/class/" + row.id).then((res) => {
                        console.log(res);
                    })
                    classData.value = classData.value.filter(item => item.id !== row.id);
                }
            };

            //  处理新增逻辑
            const handleAdd = () => {
                alert('点击新增班级（可在此弹出表单）');
            };

            // 初始化
            handleSearch();

            //  返回数据
            return {
                searchName,
                dateRange,
                filteredData,
                handleSearch,
                handleClear,
                handleEdit,
                handleDelete,
                handleAdd
            };
        }
    }).use(ElementPlus).mount('#app');
</script>
</body>
</html>
